<template>
  <!-- 大区自定义配置-->
  <div class="page">
    <el-form :rules="rules" :model="form" ref="add-form" label-width="100px" align="left">
      <el-row>
        <el-col :span="12">
          <el-form-item label="大区名称：" prop="areaName">
            <el-input v-model.trim="form.areaName" :disabled="type === 'see'"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="大区码：" prop="areaCode">
            <el-input v-model.trim="form.areaCode" :disabled="type === 'see'"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="大区范围：" prop="selectedCitysList" style="width:320px">
          <el-button type="primary" size="small" @click="dialog.area=true" v-if="type !== 'see'">选择区域</el-button>
        </el-form-item>
      </el-row>
      <el-row>
        <div class="city-list">
          <span class="my-tag" v-for="(tag, index) in selectedCitysList" :key="index">{{tag.label}}</span>
        </div>
      </el-row>
    </el-form>
    <div class="operate-buttons">
      <el-button @click="closeBtn">关闭</el-button>
      <el-button @click="commit" v-if="type !== 'see'">确定</el-button>
    </div>
    <el-dialog title="选择区域" :center="true" :visible.sync="dialog.area" width="800px" :close-on-click-modal="false" :close-on-press-escape="false" @open="$nextTick(()=>{ $refs['area'].onSelectedCitysChange() })" @close="$refs['area'].close();" append-to-body>
      <area-selection ref="area" :selectedCitys="selectedCitys"></area-selection>
      <span slot="footer" class="operate-buttons">
        <el-button type="primary" size="small" @click="closeArea">关 闭</el-button>
        <el-button type="primary" size="small" @click="saveArea">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Dependencies } from '~/core/decorator'
import { State, Mutation, Getter, namespace } from 'vuex-class'
import { Emit, Prop, Watch } from 'vue-property-decorator'
import AreaSelection from '~/components/common/area-selection.vue'
import { OutsourceCommissionedService } from '~/services/domain-service/outsource-commissioned-manage.service'
import { UserService } from '~/services/management-service/user.service'

@Component({
  components: {
    AreaSelection
  },
})
export default class AddArea extends Vue {
  @Dependencies(OutsourceCommissionedService)
  private outsourceCommissionedService: OutsourceCommissionedService
  @Dependencies(UserService)
  private UserService: UserService
  @Prop({ required: true })
  private caseRow: any
  @Prop({ required: true })
  private type: string
  private rules: any = { 
    areaName: { required: true, message: '请输入大区名称', trigger: 'change' },
    areaCode: [{ validator: this.$validator.numAndEn, trigger: "change" }, { required: true, message: '请输入大区码', trigger: 'change' }]
  }
  private areaIds = []
  private areaCodeIds: string = '' //催收区域id
  private dialog: any = { area: false }
  private selectedCitysList: any[] = []
  private form: any = {
    areaName: '',
    areaCode: '',
    cityName: ''
  }
  private mounted() {
    this.formData()
  }
  @Watch('caseRow') private onCaseRowChange() {
    const addForm: any = this.$refs['add-form']
    addForm.resetFields()
    this.form = {
      areaName: '',
      areaCode: '',
      cityName: ''
    }
    if (this.type === 'add') {
      this.selectedCitysList = []
      return
    }
    this.formData()
  }
  get selectedCitys() {
    return this.selectedCitysList.map(x => x.value)
  }
  private formData() { // 数据回显
    this.form = { ...this.caseRow }
    this.selectedCitysList = Array.from(JSON.parse(this.caseRow.cityName === undefined ? '{}' : this.caseRow.cityName))
  }
  private commit() { // 确认
    const addForm: any = this.$refs['add-form']
    addForm.validate((valid) => {
      if (!valid) {
        return false
      }
      if (this.type === 'add') {
        this.addBtn() // 新增
      } else {
        this.editBtn() // 编辑
      }
    })
  }

  private addBtn(){
    const cityNameSelect = this.selectedCitysList.map(v => v.label).join()
    const param = {
      areaCode: this.form.areaCode,
      areaName: this.form.areaName,
      cityName: JSON.stringify(this.selectedCitysList),
      id: this.type === 'add' ? '' : this.caseRow.id
    }
    this.UserService.addRegionalConfig(param).subscribe(
      data => {
        this.$message.success('保存成功')
        this.$emit('refreshData')
      },
      err => {}
    )
  }
  private editBtn(){
    const cityNameSelect = this.selectedCitysList.map(v => v.label).join()
    const param = {
      areaCode: this.form.areaCode,
      areaName: this.form.areaName,
      cityName: JSON.stringify(this.selectedCitysList),
      id: this.type === 'add' ? '' : this.caseRow.id
    }
    this.UserService.updateRegionalConfig(param).subscribe(
      data => {
        this.$message.success("编辑成功")
        this.$emit('refreshData')
      },
      err => {}
    )
  }

  private closeBtn() {
    const addForm: any = this.$refs['add-form']
    this.$emit('refreshData')
  }
  private selectedCitysClose() {
    this.selectedCitysList = (this.$refs.area as AreaSelection).getCheckedCitys()
  }
  private closeArea() {
    this.dialog.area = false
  }
  private saveArea() {
    this.selectedCitysClose()
    this.dialog.area = false
  }
}
</script>
<style scoped>
#app .page .el-form .el-form-item .el-select.address .el-input {
  width: 100%;
}
.my-tag {
  display: inline-block;
  background-color: rgba(64, 158, 255, 0.1);
  padding: 0 10px;
  height: 32px;
  line-height: 30px;
  font-size: 12px;
  color: #409eff;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid rgba(64, 158, 255, 0.2);
  white-space: nowrap;
}
.city-list {
  margin-bottom: 20px;
  padding: 0 20px;
}
</style>
